<!--
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="/0.5/components/polymer/polymer.html">
<link rel="import" href="/0.5/components/core-media-query/core-media-query.html">

<polymer-element name="scroll-area" attributes="sidebar">
  <template>
    <link rel="stylesheet" href="../../css/elements/scroll-area.css">
    <core-media-query query="min-width: 581px" queryMatches="{{fancyheader}}"></core-media-query>
    <content></content>
  </template>
  <script>
(function() {
  function onScroll_() {
    this.previousScrollY = this.latestKnownScrollY;
    /* IE10 only supports pageYOffset */
    this.latestKnownScrollY = window.scrollY || window.pageYOffset;
    requestTick_.bind(this)();
  }

  function requestTick_() {
    if (!this.ticking) {
      window.requestAnimationFrame(update_.bind(this));
    }
    this.ticking = true;
  }

  function update_() {
    this.ticking = false; // Reset the tick so we can capture the next onScroll.

    var currentScrollY = this.latestKnownScrollY;
    // var previousScrollY = this.previousScrollY;

    this.smallBannerSizeReached = this.siteBannerHeight - currentScrollY < this.appBarHeight;  //80px;

    if (this.smallBannerSizeReached) {
      this.classList.add('scrolling');
      this.header && this.header.classList.add('shrink');
    } else {
      this.classList.remove('scrolling');
      this.header && this.header.classList.remove('shrink');

      // Fix and shrink header when it hits the top of the page.
      if (this.header && this.header.offsetTop - currentScrollY <= 0) {
        this.header.classList.add('shrink');
      }
    }
  }

  Polymer({
    latestKnownScrollY: 0,
    previousScrollY: 0,
    smallBannerSizeReached: false,
    ticking: false,
    fancyheader: true, // header sticks on scroll
    publish: {
      sidebar: {value: false, reflect: true}
    },
    attached: function() {
      this.init();
    },
    init: function() {
      var siteBanner = this.querySelector('site-banner');
      this.appBar = siteBanner.querySelector('app-bar');
      this.header = siteBanner.querySelector('header');

      // Give DOM some time to do layout.
      this.async(function() {
        this.siteBannerHeight = siteBanner.offsetHeight;
        this.appBarHeight = this.appBar.offsetHeight;
      });

      // For testing.
      // this.siteBannerHeight = 286;
      // this.appBarHeight = 80;

      // bind() returns new function. Save named reference.
      this.onscroll = onScroll_.bind(this);

      this.fancyheaderChanged();

      // Handle pageload in middle of page.
      if ((window.scrollY || window.pageYOffset) && this.fancyheader) {
        this.onscroll();
      }
    },
    fancyheaderChanged: function() {
      if (this.fancyheader) {
        window.addEventListener('scroll', this.onscroll, false);
      } else {
        window.removeEventListener('scroll', this.onscroll, false);
        this.classList.remove('scrolling');
        this.header && this.header.classList.remove('shrink');
      }
    }
  });
})();
</script>
</polymer-element>
